<template>
    <div class='suggestion'>
      <div v-for="(item,index) in suggestions" :key="index">
        <van-cell icon="search" @click="$emit('search',item)">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div v-html="highlight(item,search_key)"></div>
          </template>
        </van-cell>
      </div>
    </div>
</template>

<script>
export default {
  name: 'CesuanMSearchSuggestion',
  props: {
    suggestions: {
      type: Array,
      require: true
    },
    search_key: {
      type: String,
      require: true
    }
  },
  methods: {
    highlight (suggestion, key) {
      const reg = new RegExp(key, 'gi')
      return suggestion.replace(reg, `<span style="color:#ffd000">${key}</span>`)
    }
  }
}
</script>

<style lang="less" scoped>
  .suggestion{
     /deep/.van-cell{
    height:150px;
    line-height: 150px;
    font-size: 60px;
    .van-cell__left-icon, .van-cell__right-icon{
      font-size: 1rem;
      line-height: 2rem;
    }
  }
  }
</style>
